<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/skin.css">    <!--css карусели-->
    <link rel="stylesheet" type="text/css" href="css/MetroJs.css">  <!--metro-->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js" type="text/javascript"></script>
    <script src="js/jquery.js" type="text/javascript"></script>  <!--подключение jquery! удалить потом!-->
    <script src="js/jquery.selectbox.min.js" type="text/javascript"></script> <!--Select plugin-->
    <script src="js/jCarousel.js" type="text/javascript"></script>  <!--jCarousel-->
    <script src="js/MetroJs.js" type="text/javascript"></script> <!--metro-->
    <title>Pricehole</title>

    <!--select top-->
    <script>
        (function ($) {
            $(function () {

                $('#sel').selectbox();

                $('#add').click(function (e) {
                    $(this).parents('div.section').append('<br /><br /><select><option>Category</option><option>Пункт 1</option><option>Пункт 2</option><option>Пункт 3</option><option>Пункт 4</option><option>Пункт 5</option></select>');
                    $('#sel').selectbox();
                    e.preventDefault();
                })

                $('#add2').click(function (e) {
                    var options = '';
                    for (i = 1; i <= 5; i++) {
                        options += '<option>Option ' + i + '</option>';
                    }
                    $(this).parents('div.section').find('#sel').each(function () {
                        $(this).append(options);
                    })
                    $('#sel').trigger('refresh');
                    e.preventDefault();
                })

                $('#che').click(function (e) {
                    $(this).parents('div.section').find('option:nth-child(5)').attr('selected', true);
                    $('#sel').trigger('refresh');
                    e.preventDefault();
                })

            })
        })(jQuery)
    </script>
    <!--carousel-->
    <script type="text/javascript">

        jQuery(document).ready(function () {
            jQuery('#mycarousel, #mycarousel1').jcarousel({
                wrap:'circular',
                wrap1:'circular'
            });
        });

    </script>
    <!-- jq auto slider -->
    <script>
        $(document).ready(function() {

            $(".paging").show();
            $(".paging a:first").addClass("active");
            var imageWidth = $(".window").width();
            var imageSum = $(".image_reel img").size();
            var imageReelWidth = imageWidth * imageSum;
            $(".image_reel").css({'width' : imageReelWidth});

            rotate = function(){
                var triggerID = $active.attr("rel") - 1; //Взять количество раз для прокрутки
                var image_reelPosition = triggerID * imageWidth; //Определить дистанцию для прокрутки

                $(".paging a").removeClass('active'); //Убрать все классы active
                $active.addClass('active'); //Добавить класс active

                //Анимация слайдера
                $(".image_reel").animate({
                    left: -image_reelPosition
                }, 500 );

            };
//Вращение и заддержка
            rotateSwitch = function(){
                play = setInterval(function(){ //Задать таймер
                    $active = $('.paging a.active').next();
                    if ( $active.length === 0) {
                        $active = $('.paging a:first'); //после последней - обратно на первую
                    }
                    rotate();
                }, 3000); //Время для прокрутки (7 секунд)
            };

            rotateSwitch();


//При нажатии
            $(".paging a").click(function() {
                $active = $(this);
//Сброс таймера
                clearInterval(play); //Прекратить смену слайдов
                rotateSwitch(); // Продожить
                rotate(); //Вызвать немедленно смену
                return false;
            });
        });
    </script>
    <!-- narrow search select-->
    <script>
        $('.sel_imul').live('click', function() {
            $('.sel_imul').removeClass('act');
            $(this).addClass('act');
            if ($(this).children('.sel_options').is(':visible')) {
                $('.sel_options').hide();
            }
            else {
                $('.sel_options').hide();
                $(this).children('.sel_options').show();
            }
        });
        $('.sel_option').live('click', function() {
            //меняем значение на выбранное
            var tektext = $(this).html();
            $(this).parent('.sel_options').parent('.sel_imul').children('.sel_selected').children('.selected-text').html(tektext);

            //активируем текущий
            $(this).parent('.sel_options').children('.sel_option').removeClass('sel_ed');
            $(this).addClass('sel_ed');

            //устанавливаем значение для селекта
            var tekval = $(this).attr('value');
            tekval = typeof(tekval) != 'undefined' ? tekval : tektext;
            $(this).parent('.sel_options').parent('.sel_imul').parent('.sel_wrap').children('select').children('option').removeAttr('selected').each(function() {
                if ($(this).val() == tekval) {
                    $(this).attr('selected', 'select');
                }
            });
        });

        var selenter = false;
        $('.sel_imul').live('mouseenter', function() {
            selenter = true;
        });
        $('.sel_imul').live('mouseleave', function() {
            selenter = false;
        });
        $(document).click(function() {
            if (!selenter) {
                $('.sel_options').hide();
                $('.sel_imul').removeClass('act');
            }
        });

        function reselect(select, addclass) {

            addclass = typeof(addclass) != 'undefined' ? addclass : '';

            $(select).wrap('<div class="sel_wrap ' + addclass + '"/>');

            var sel_options = '';
            $(select).children('option').each(function() {
                sel_options = sel_options + '<div class="sel_option" value="' + $(this).val() + '">' + $(this).html() + '</div>';

            });

            var sel_imul = '<div class="sel_imul">\
                <div class="sel_selected">\
                    <div class="selected-text">' + $(select).children('option').first().html() + '</div>\
                    <div class="sel_arraw"></div>\
                </div>\
                <div class="sel_options">' + sel_options + '</div>\
            </div>';

            $(select).before(sel_imul);

        }

    </script>
    <!--UP to the top-->
    <script>
        (function($) {
            $(function() {

                $('#up').click(function() {
                    $('body,html').animate({scrollTop:0},500);
                    return false;
                })
            })
        })(jQuery)
    </script>
    <!--Collapse-->
    <script type="text/javascript">
        $(document).ready(function(){
            $(".btn-slide").click(function(){
                $("#panel1").slideToggle("slow");
                $(this).toggleClass("active");
                $("html, body").animate({ scrollTop: $(document).height() }, "slow"); <!--DOWN to the Collapse-->
                return false;
            });
        });
    </script>

    <style>


    </style>
</head>

<body>

<div class="all_wrap">
<div class="bckgr_top">
<div class="mainwrap">
    <header>
        <div class="head_top">
            <a class="logo" href="index.html"></a>
            <form class="search section">
                <div>
                    <select id="sel" class="categories">
                        <option>Categories</option>
                        <option>Crows</option>
                        <option>Fucs</option>
                        <option>Cats</option>
                        <option>Dogs</option>
                        <option>Rats</option>
                        <option>Fishes</option>
                    </select>
                </div>
                <input type="text" placeholder="I'm looking for...">
                <button type="submit">Go</button>
            </form>
            <div class="user">
                <div class="user_ava"><a href="#"><img src="pics/user_ava.png"></a></div>
                <div class="user_nickname">
                    <p><a href="#">Welcome,</a></p>
                    <p><a href="#">Deema</a></p>
                </div>
            </div>
        </div>
        <div class="registration">
            <div class="reg_sign">
                <p>Welcome <a href="#">Sign in</a> or <a href="#">Register</a></p>
            </div>
        </div>

        <nav></nav>

        <DIV id='wrap'>
            <UL class='jcarousel-skin-tango' id='mycarousel'>
                <LI><a href="#"><IMG height=67 alt="" src="pics/static_circular/1.png" width=71></a>
                <LI><a href="#"><IMG height=67 alt="" src="pics/static_circular/2.png" width=71></a>
                <LI><a href="#"><IMG height=67 alt="" src="pics/static_circular/3.png" width=71></a>
                <LI><a href="#"><IMG height=67 alt="" src="pics/static_circular/4.png" width=71></a>
                <LI><a href="#"><IMG height=67 alt="" src="pics/static_circular/5.png" width=71></a>
                <LI><a href="#"><IMG height=67 alt="" src="pics/static_circular/6.png" width=71></a>
                <LI><a href="#"><IMG height=67 alt="" src="pics/static_circular/7.png" width=71></a>
                <LI><a href="#"><IMG height=67 alt="" src="pics/static_circular/8.png" width=71></a>
                <LI><a href="#"><IMG height=67 alt="" src="pics/static_circular/9.png" width=71></a>
                <LI><a href="#"><IMG height=67 alt="" src="pics/static_circular/10.png" width=71></a>
                <LI><a href="#"><IMG height=67 alt="" src="pics/static_circular/11.png" width=71></a>
                <LI><a href="#"><IMG height=67 alt="" src="pics/static_circular/12.png" width=71></a> </LI>
            </UL>
        </DIV>
    </header>

    <div class="bodywrap">
        <div class="narrow_search">
            <div class="narrow_pics"></div>
            <div class="search_now">
                <form>
                    <div class="search_txt">I'm searching for</div>

                    <div class="sel_wrap">
                        <div class="sel_imul">
                            <div class="sel_selected">
                                <div class="selected-text">Electronix</div><div class="sel_arraw"></div>
                            </div>
                            <div class="sel_options">
                                <div class="sel_option" value="eee">Electronix</div>
                                <div class="sel_option" value="222">Mobils</div>
                                <div class="sel_option" value="444">Mobils</div>
                                <div class="sel_option" value="123">Sqeq</div>
                                <div class="sel_option" value="122">TV</div>
                                <div class="sel_option" value="113">T-shirts</div>
                                <div class="sel_option" value="124">Potatoes</div>
                            </div>
                        </div>
                        <select id="ourselect1">
                            <option value="eee">Electronix</option>
                            <option value="222">Mobils</option>
                            <option value="444">Mobils</option>
                            <option value="123">Sqeq</option>
                            <option value="122">TV</option>
                            <option value="113">T-shirts</option>
                            <option value="124">Potatoes</option>
                        </select>
                    </div>

                    <div class="sel_wrap">
                        <div class="sel_imul">
                            <div class="sel_selected">
                                <div class="selected-text">Digital Camera</div><div class="sel_arraw"></div>
                            </div>
                            <div class="sel_options">
                                <div class="sel_option" value="eee">Digital Camera</div>
                                <div class="sel_option" value="222">Mobils</div>
                                <div class="sel_option" value="444">Tv-tuner</div>
                                <div class="sel_option" value="123">elfs</div>
                                <div class="sel_option" value="122">gnims</div>
                                <div class="sel_option" value="113">T-shirts</div>
                                <div class="sel_option" value="124">Potatoes</div>
                            </div>
                        </div>
                        <select id="ourselect2">
                            <option value="eee">Digital Camera</option>
                            <option value="222">Mobils</option>
                            <option value="444">Tv-tuner</option>
                            <option value="123">elfs</option>
                            <option value="122">gnims</option>
                            <option value="113">T-shirts</option>
                            <option value="124">Potatoes</option>
                        </select>
                    </div>
                    <div class="search_txt">, Price between</div>

                    <div class="sel_wrap">
                        <div class="sel_imul sel_imul1">
                            <div class="sel_selected">
                                <div class="selected-text">100</div><div class="sel_arraw"></div>
                            </div>
                            <div class="sel_options sel_options1">
                                <div class="sel_option sel_option1" value="eee">100</div>
                                <div class="sel_option sel_option1" value="222">110</div>
                                <div class="sel_option sel_option1" value="444">120</div>
                                <div class="sel_option sel_option1" value="123">130</div>
                                <div class="sel_option sel_option1" value="122">140</div>
                                <div class="sel_option sel_option1" value="113">150</div>
                                <div class="sel_option sel_option1" value="124">160</div>
                            </div>
                        </div>
                        <select id="ourselect3">
                            <option value="eee">100</option>
                            <option value="222">110</option>
                            <option value="444">120</option>
                            <option value="123">130</option>
                            <option value="122">140</option>
                            <option value="113">150</option>
                            <option value="124">160</option>
                        </select>
                    </div>

                    <div class="search_txt">and</div>

                    <div class="sel_wrap">
                        <div class="sel_imul sel_imul1">
                            <div class="sel_selected">
                                <div class="selected-text">100</div><div class="sel_arraw"></div>
                            </div>
                            <div class="sel_options sel_options1">
                                <div class="sel_option sel_option1" value="eee">100</div>
                                <div class="sel_option sel_option1" value="222">110</div>
                                <div class="sel_option sel_option1" value="444">120</div>
                                <div class="sel_option sel_option1" value="123">130</div>
                                <div class="sel_option sel_option1" value="122">140</div>
                                <div class="sel_option sel_option1" value="113">150</div>
                                <div class="sel_option sel_option1" value="124">160</div>
                            </div>
                        </div>
                        <select id="ourselect4">
                            <option value="eee">100</option>
                            <option value="222">110</option>
                            <option value="444">120</option>
                            <option value="123">130</option>
                            <option value="122">140</option>
                            <option value="113">150</option>
                            <option value="124">160</option>
                        </select>
                    </div>

                    <input class="find" type="submit" value="Find">


                </form>

            </div>
        </div>
        <div class="advert">
            <div class="adv_left">
                <div class="main_view">
                    <div class="window">
                        <div class="image_reel">
                            <a href="#"><img src="pics/slider/rel_1.jpg" alt="" /></a>
                            <a href="#"><img src="pics/slider/rel_2.jpg" alt="" /></a>
                            <a href="#"><img src="pics/slider/rel_3.jpg" alt="" /></a>
                            <a href="#"><img src="pics/slider/rel_4.jpg" alt="" /></a>
                        </div>
                    </div>
                    <div class="paging">
                        <a href="#" rel="1">1</a>
                        <a href="#" rel="2">2</a>
                        <a href="#" rel="3">3</a>
                        <a href="#" rel="4">4</a>
                    </div>
                    <div class="social_netw">
                        <a href="http://www.facebook.com/" class="facebook social"></a>
                        <a href="http://www.twitter.com/" class="twitter social"></a>
                        <a href="http://www.pinterest.com/" class="p social"></a>
                    </div>
                </div>
            </div>
            <div class="adv_right"></div>
            <div class="free"></div>
        </div>

        <div class="banners">
            <div style="display: block;" class="box visible">
                <div class="metro">

            <div class="banner_left">
                <div class="banner_left_top">
                    <div class="banner_first">
                        <div class="red live-tile" data-mode="flip" data-delay="7000"> <!--4 sec-->
                            <div><a href="#"><img src="pics/metro/1_b.jpg" alt="" /></a></div>
                            <div><a href="#"><img src="pics/metro/2_b.jpg" alt="" /></a></div>
                        </div>
                    </div>
                    <div class="banner_left_r">
                        <div class="banner_four">
                                <div class="red live-tile" data-mode="flip" data-delay="3000"> <!--4 sec-->
                                    <div><a href="#"><img src="pics/metro/4_b.jpg" alt="" /></a></div>
                                    <div><a href="#"><img src="pics/metro/5_b.jpg" alt="" /></a></div>
                                </div>
                        </div>
                        <div class="banner_six">
                            <div class="red live-tile" data-mode="flip" data-delay="3000"> <!--4 sec-->
                                <div><a href="#"><img src="pics/metro/6_b.jpg" alt="" /></a></div>
                                <div><a href="#"><img src="pics/metro/4_b.jpg" alt="" /></a></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="banner_three">
                    <div class="red live-tile" data-mode="flip" data-delay="10000"> <!--4 sec-->
                        <div><a href="#"><img src="pics/metro/3_b.jpg" alt="" /></a></div>
                        <div><a href="#"><img src="pics/metro/3_bb.jpg" alt="" /></a></div>
                    </div>
                </div>
            </div>
            <div class="banner_right">
                <div class="banner_five">
                    <div class="red live-tile" data-mode="flip" data-delay="3000"> <!--4 sec-->
                        <div><a href="#"><img src="pics/metro/5_b.jpg" alt="" /></a></div>
                        <div><a href="#"><img src="pics/metro/6_b.jpg" alt="" /></a></div>
                    </div>
                </div>
                <div class="banner_two">
                    <div class="red live-tile" data-mode="flip" data-delay="7000"> <!--4 sec-->
                        <div><a href="#"><img src="pics/metro/2_b.jpg" alt="" /></a></div>
                        <div><a href="#"><img src="pics/metro/1_b.jpg" alt="" /></a></div>
                    </div>
                </div>
            </div>

        </div>

        <script type="text/javascript">
            $(".live-tile, .flip-list").not(".exclude").liveTile();
        </script>
    </div>
        </div>







        <div class="shop_by_brand">
            <div class="brand_pics"></div>
            <div class="search_brand">
                <div id='wrap1'>
                    <ul class='jcarousel-skin-tango' id='mycarousel1'>
                        <li class="jcarousel-item jcarousel_hb"><a href="#"><img height=67 alt="" src="pics/brands/1_sams.png" width=94></a>
                        <li class="jcarousel-item jcarousel_hb"><a href="#"><img height=67 alt="" src="pics/brands/2_can.png" width=94></a>
                        <li class="jcarousel-item jcarousel_hb"><a href="#"><img height=67 alt="" src="pics/brands/3_micr.png" width=94></a>
                        <li class="jcarousel-item jcarousel_hb"><a href="#"><img height=67 alt="" src="pics/brands/4_sony.png" width=94></a>
                        <li class="jcarousel-item jcarousel_hb"><a href="#"><img height=67 alt="" src="pics/brands/5_hp.png" width=94></a>
                        <li class="jcarousel-item jcarousel_hb"><a href="#"><img height=67 alt="" src="pics/brands/6_pan.png" width=94></a>
                        <li class="jcarousel-item jcarousel_hb"><a href="#"><img height=67 alt="" src="pics/brands/7_asus.png" width=94></a>
                        <li class="jcarousel-item jcarousel_hb"><a href="#"><img height=67 alt="" src="pics/brands/8_sea.png" width=94></a>
                        <li class="jcarousel-item jcarousel_hb"><a href="#"><img height=67 alt="" src="pics/brands/1_sams.png" width=94></a>
                        <li class="jcarousel-item jcarousel_hb"><a href="#"><img height=67 alt="" src="pics/brands/2_can.png" width=94></a>
                        <li class="jcarousel-item jcarousel_hb"><a href="#"><img height=67 alt="" src="pics/brands/3_micr.png" width=94></a>
                        <li class="jcarousel-item jcarousel_hb"><a href="#"><img height=67 alt="" src="pics/brands/4_sony.png" width=94></a></li>
                    </ul>
                </div>
            </div>
        </div>

            <div class="back_tothetop_index"><a href="#" id="up">Back To The Top &nbsp &nbsp &#x25B2</a></div>

    </div>
    <div class="collapse">
        <div class="clear">
            <p id="down" class="slide"><a href="#" class="btn-slide active"></a></p>
            <div class="menu_collapse">
            </div>
        </div>
        <div style="display: block;" class="panel" id="panel1">
                <nav>
            <div class="columns">
                    <ul class="f_column">
                        <li class="menu_coll"><a href="#">Services</a></li>
                        <li class="gray"><a href="#">Product Advertising</a></li>
                        <li class="gray"><a href="#">Business Intelligence</a></li>
                        <li class="gray"><a href="#">Merchandising Optimization</a></li>
                        <a  href="http://www.paypall.com/">
                            <img class="paypall" src="pics/paypall.png" alt="paypall">
                        </a>
                    </ul>
                    <ul class="f_column">
                        <li class="menu_coll"><a href="#">Our System</a></li>
                        <li class="gray"><a href="#">Google Shopping</a></li>
                        <li class="gray"><a href="#">Google Retail Promotion</a></li>
                        <li class="gray"><a href="#">Shopping Engines</a></li>
                        <li class="gray"><a href="#">Product Feeds</a></li>
                        <li class="gray"><a href="#">Marketplaces</a></li>
                        <li class="gray"><a href="#">Amazon Marketplace</a></li>
                        <li class="gray"><a href="#">Amazon Repricing</a></li>
                        <li class="gray"><a href="#">Retail SEM Solution</a></li>
                    </ul>
                    <ul class="t_column">
                        <li class="menu_coll"><a href="#">Benefits</a></li>
                        <li class="gray"><a href="#">Mercent DNA</a></li>
                        <li class="gray"><a href="#">Differentiated Technology</a></li>
                        <li class="gray"><a href="#">Expert Services</a></li>
                        <li class="gray"><a href="#">Case Studies</a></li>
                    </ul>
                    <ul class="th_column">
                        <li class="menu_coll"><a href="#">News</a></li>
                        <li class="gray"><a href="#">Press Releases</a></li>
                        <li class="gray"><a href="#">Events</a></li>
                        <li class="gray"><a href="#">In The News</a></li>
                        <li class="gray"><a href="#">Videos</a></li>
                    </ul>
                    <ul class="ff_column">
                        <li class="menu_coll"><a href="#">Strategic Partners</a></li>
                        <li class="gray"><a href="#">Channel Partners</a></li>
                        <li class="gray"><a href="#">Technology Partners</a></li>
                        <li class="gray"><a href="#">Service Partners</a></li>
                    </ul>
                    <ul class="six_column">
                        <li class="menu_coll"><a href="#">Company Profile</a></li>
                        <li class="gray"><a href="#">Management Team</a></li>
                        <li class="gray"><a href="#">Investors</a></li>
                        <li class="gray"><a href="#">Careers</a></li>
                        <li class="gray"><a href="#">Terms Of Service</a></li>
                        <li class="gray"><a href="#">Privacy Policy</a></li>
                    </ul>
                    <ul class="ff_column">
                        <li class="menu_coll"><a href="#">Help Center</a></li>
                        <li class="gray"><a href="#">Blog</a></li>
                        <li class="gray"><a href="#">Webinars</a></li>
                    </ul>
                </div>
                </nav>
                <div class="cards">
                    <a href="http://www.truste.com/" class="truste"></a>
                    <a href="http://www.visa.com/" class="visa"></a>
                    <a href="http://www.mastercard.com/" class="master"></a>
                    <a href="http://www.discover.com/" class="discover"></a>
                    <a href="http://www.visa.org/" class="xz"></a>
                    <a href="https://wallet.google.com/" class="google"></a>
                 </div>
        </div>
    </div>

    <footer>
            <a href="http://www.bbb.org/">
                <img class="footer_icon" src="pics/bbb.png" alt="BBB">
            </a>
            <div class="copy">
                <p>Copyright 2013.All Rights Reserved.</p>
                <p>Pricehole, pricehole.com are registered trademarks.</p>
                <p>All Trdemarks are property of their legal owners.</p>
                <p>Pricehole Inc.</p>
            </div>
            <div class="bott_footer">
                <form>
                    <button type="submit"> </button>
                    <input type="text" placeholder="Search site for...">
                </form>
            </div>
    </footer>
</div>
</div>
</div>
</body>
</html>
